<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <el-form
        :model="formData"
        :rules="formRules"
        ref="formData"
        label-width="164px"
        class="demo-formData"
      >
        <el-row>
          <el-form-item prop="year" label="年份：" class="row-padding-bottom">
            <el-date-picker
              v-model="formData.year"
              class="sWidth"
              type="year"
              placeholder="选择年份"
              clearable
              value-format="yyyy"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            prop="batchNo"
            label="批次号："
            class="row-padding-bottom"
          >
            <el-input
              type="text"
              v-model="formData.batchNo"
              class="sWidth"
              placeholder="请输入批次号"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            prop="companyName"
            label="违法主体："
            class="row-padding-bottom"
          >
            <el-input
              type="text"
              v-model="formData.companyName"
              placeholder="请输入违法主体"
              class="mWidth"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            prop="uscc"
            label="社会信用代码/身份证："
            class="row-padding-bottom projectName"
          >
            <el-input
              v-model="formData.uscc"
              placeholder="请输入社会信用代码或身份证号"
              class="sWidth"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            v-bind:prop="address"
            label="地址："
            class="row-padding-bottom"
          >
            <el-input
              type="text"
              v-model="formData.address"
              class="lWidth"
              placeholder="请输入地址"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            v-bind:prop="header"
            label="法定代表人或负责人："
            class="row-padding-bottom"
          >
            <el-input
              type="text"
              v-model="formData.header"
              class="sWidth"
              placeholder="请输入法定代表人或负责人"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            prop="eventReason"
            label="主要违法事实："
            class="row-padding-bottom"
          >
            <el-input
              type="text"
              v-model="formData.eventReason"
              class="lWidth"
              placeholder="请输入主要违法事实"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            prop="investigate"
            label="查处情况："
            class="row-padding-bottom"
          >
            <el-input
              type="textarea"
              v-model="formData.investigate"
              rows="5"
              style="width: calc(88% - 14px)"
              placeholder="请输入查处情况"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-form-item class="submitBox">
          <el-button
            type="primary"
            class="commonBut saveBtn"
            @click.native="saveForm"
            :loading="isSaveLoading"
            >保存</el-button
          >
          <el-button class="commonBut" @click="goBack">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'bigUnlawerCaseEdit',
  data() {
    return {
      //时期选择器
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
      },
      titleText: '编辑重大劳动保障违法案件',
      back: true,
      areaId: '',
      isSaveLoading: false, // 保存loading
      formData: {
        year: '',
        batchNo: '',
        eventReason: '',
        companyName: '',
        uscc: '',
        address: '',
        header: '',
        investigate: '',
        id: '',
      },
      formRules: {
        year: [{ required: true, message: '请选择年份', trigger: 'change' }],

        batchNo: [
          { required: true, message: '批次号不能为空', trigger: 'blur' },
        ],
      },
    }
  },

  created() {
    //字典表下拉框
    this.formData.id = this.$route.query.id
    if (this.$route.query.id) {
      this.getDetail(this.formData.id)
    } else {
      this.titleText = '新增重大劳动保障违法案件'
    }
    this.isShowSave =
      this.$store.state.buttonLimitsArr.indexOf('importEvent:update') > -1
  },

  methods: {
    getDetail(id) {
      this.axios({
        method: 'post',
        url: 'api-r/seriousEventHandler/get',
        data: {
          id: id,
        },
      })
        .then((response) => {
          var data = response.data.result
          const {
            year,
            batchNo,
            eventReason,
            companyName,
            uscc,
            address,
            header,
            investigate,
            id,
          } = data
          this.formData = {
            year,
            batchNo,
            eventReason,
            companyName,
            uscc,
            address,
            header,
            investigate,
            id,
          }
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    saveForm() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.saveFormInfo()
        } else {
          return false
        }
      })
    },
    saveFormInfo() {
      let params = this.formData
      let url = ''
      if (!this.$route.query.id) {
        delete params.id
        url = 'api-r/seriousEventHandler/add'
      } else {
        url = 'api-r/seriousEventHandler/update'
      }
      this.isSaveLoading = true
      this.axios({
        method: 'post',
        url,
        data: params,
      })
        .then((response) => {
          this.isSaveLoading = false
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '保存成功',
            })
            this.formVisible = false
            this.$router.push('/home/kMCaseComplaint/bigUnlawerCase')
            this.$store.commit('GOBACK_NAME', {
              oldUrl: '/home/kMCaseComplaint/bigUnlawerCase',
              newUrl: this.$router.currentRoute.fullPath,
            })
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
            this.isSaveLoading = false
          }
        })
        .catch((error) => {
          //this.$message.error("保存失败");
          this.$message.error('数据获取失败')
          this.isSaveLoading = false
        })
    },
    goBack() {
      this.$router.push('/home/kMCaseComplaint/bigUnlawerCase')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/kMCaseComplaint/bigUnlawerCase',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>
<style scoped lang="less">
.container {
  .mainCon {
    padding: 40px 60px 40px 20px;
    height: calc(100% - 67px);
    overflow-y: auto;
    .submitBox {
      text-align: left;
      margin-top: 18px;
    }
  }
}
form.el-form.demo-formData {
  // width: 500px;
  // display: inline-block;
  text-align: left;
  .selectWidth {
    width: 100%;
  }
}
// .el-main .el-form-item {
//   margin-bottom: 20px;
// }
.saveBtn {
  background-color: #009588;
  border-color: #009588;
  color: #fff;
}
</style>
